<template>
    <el-drawer v-model="drawerVisible"  
    size="300"
    title="项目设置"
    direction="rtl"
    style="text-align: left;"
    :before-close="handleCloseDrawer">    
        <section class="config-section" >
            <el-divider>配置信息</el-divider>
            <div class="flex-center">
                <el-switch v-model="isDark" :active-icon="Moon" :inactive-icon="Sunny"  />
            </div>
        </section>
    </el-drawer>
</template>

<script setup>
import { ref , onUnmounted} from 'vue';
import emitter from "@/utils/emitter";
import { Check, Close, Moon,Sunny  } from '@element-plus/icons-vue'

const drawerVisible = ref(false);
const isDark = ref(false);
const handleCloseDrawer= () =>{
    drawerVisible.value = false
    emitter.emit("drawerClose",drawerVisible.value)
}
emitter.on('drawerVisible',(value)=>{
    drawerVisible.value = value
})

onUnmounted(()=>{
  // 解绑事件
  emitter.off('send-toy')
})

</script>
<style scoped>
.title-style{
    
}
.flex-center {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.config-section {
  margin-bottom: 24px;
}
.config-section .config-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--el-border-color-light);
}
.config-section .config-item:last-child {
  border-bottom: none;
}
</style>